<template>
  <d2-container>
    <div style="margin: 20px">
      <div style="margin: 10px 0">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="dataset_name"></el-input>
        <el-button style="margin-left: 10px" type="primary" @click="getDatasets">搜索</el-button>
        <el-button style="margin-left: 10px" type="primary" @click="reset">重置</el-button>
        <el-button style="float:right" type="primary" @click="$router.push('/data/create')">创建数据集</el-button>
      </div>
      <div style="margin: 10px 0">
        <el-row v-for="item in datasets" :key="item.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.title }}</span>
              <el-popconfirm popper-class="popper" title="确认删除该项目吗?" @confirm="deleteDataset(item.id)">
                <el-button style="float: right; margin-left:10px; padding: 5px 0; color: rgba(197,69,102,0.68)"
                           type="text" slot="reference">删除
                </el-button>
              </el-popconfirm>
            </div>
            <el-descriptions direction="vertical" :column="6" border>
              <el-descriptions-item label="数据集ID">{{ item.id }}</el-descriptions-item>
              <el-descriptions-item label="标注类型">
                <el-tag size="small" v-if="item.type===0">
                  图像分类
                </el-tag>
                <el-tag size="small" v-if="item.type===1">
                  目标检测
                </el-tag>
                <el-tag size="small" v-if="item.type===2">
                  图像分割
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="图片数量">{{ item.task_number }}</el-descriptions-item>
              <el-descriptions-item label="已标注数量">{{ item.finished_task_number }}</el-descriptions-item>
              <el-descriptions-item label="标注状态">
                <el-tag size="small" type="" v-if="item.task_number===item.finished_task_number&&item.task_number!=0">
                  标注完成
                </el-tag>
                <el-tag size="small" v-if="item.task_number!=item.finished_task_number">
                  标注未完成
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button style="padding: 5px 0" type="text" @click="goLabelStudio(item.id)">查看与标注</el-button>
                <el-button style="padding: 5px 0" :disabled="item.task_number!=item.finished_task_number||item.task_number==0" type="text" @click="handleData(item.id, item.type)">上传</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-row>
      </div>
      <div style="margin: 10px 0">
        <el-card class="card" v-if="totalPage >= 0">
          <!-- 分页插件 -->
          <div>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[1, 2, 3]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </d2-container>
</template>

<script>

import {
  HandleDataset,
  UploadJson,
  GetDatasets,
  DelDataObj,
  ExportSnapshot,
  DownloadSnapshot,
  UpdateDataset
} from './api.js'

export default {
  name: 'index',
  data () {
    return {
      datasets: [],
      dataset_name: '',
      totalPage: 0,
      currentPage: 1,
      pageSize: 3
    }
  },
  methods: {
    // 获取所有数据集
    getDatasets () {
      const query = { title: this.dataset_name, creator: this.$store.state.d2admin.user.info.user_id }
      query.page_size = this.pageSize
      query.page = this.currentPage
      GetDatasets(query).then(response => {
        this.totalPage = response.count
        this.datasets = response.results
      })
    },
    // 重置搜索框
    reset () {
      this.dataset_name = ''
      this.getDatasets()
    },
    // 根据数据集ID删除数据集
    deleteDataset (id) {
      DelDataObj(id).then(response => {
        this.getDatasets()
      })
    },
    // 跳转到labelstudio
    goLabelStudio (id) {
      // window.location.href = e
      // 新打开窗口
      window.open('http://127.0.0.1:8090/projects/' + id)
    },
    // 标注完成后处理数据集
    handleData (id, type) {
      let exportType
      if (type === 0) {
        exportType = 'JSON_MIN'
      } else if (type === 1 || type === 2) {
        exportType = 'COCO_MIN'
      }
      // 通过数据集ID创建导出快照
      ExportSnapshot(id).then(response => {
        // 下载json格式快照
        DownloadSnapshot(id, response.id, exportType).then(response => {
          console.log(response)
          // 保存json文件到对应路径
          UploadJson(id, response).then(response => {
            // 划分训练集验证集
            HandleDataset(id, type).then(response => {
              // 更新数据集制作状态
              UpdateDataset(id, 1).then(response => {
                this.$message.success('上传成功')
              })
            })
          })
        })
      })
    },
    // 每页条数改变
    handleSizeChange (val) {
      this.pageSize = val
      this.getDatasets()
    },
    // 翻页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getDatasets()
    }
  },
  created: function () {
    this.getDatasets()
  }

}
</script>

<style scoped>
</style>
